<template>
  <div class="loginpic niMingLogin">
    <el-image class="loginbg" :src="url" fit="cover"></el-image>
    <div class="loginbox">
      <div class="pai">
        <el-image style="width: 340px; height: 90px" :src="website.logo" fit="contain" class="logo">
        </el-image>
      </div>
      <div class="loginmain">
        <div class="title" style="font-size: 45px;color: #484848;margin-bottom: 60px;">
<!--          <img style="width: 100%; margin: 0 auto;" src="/images/jixiaotitle.png" fit="contain" class="logo"></img>-->
          大连西太平洋石化公司
        </div>
        <div style="margin-top:20px">
          <el-form ref="loginForm" :rules="loginRules" :model="loginForm" class="login-form" status-icon
                   label-width="0">
            <el-form-item prop="username">
              <div class="fontDa">
                <div class="logininput">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yonghu"></use>
                  </svg>
                  <el-input v-model="loginForm.username" auto-complete="off" placeholder=""
                            @keyup.enter.native="handleLogin" placeholder="登录码">
                  </el-input>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="fontDa">
                <el-button type="primary" class="loginbtn sybtn" @click.native.prevent="handleLogin"
                           style="font-size:30px !important;">开始测评
                </el-button>
              </div>
            </el-form-item>
          </el-form>
<!--          <cePing ref="cePing" @next="reloadHd"/>-->
          <cePingIndex ref="cePingIndex" @next="reloadHd" />
        </div>
      </div>
    </div>
    <div class="login-copyright nMcopyright" style="justify:center;">
      {{ website.copyright }}
    </div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import topColor from '@/page/index/top/top-color'
import {getObj as getHdInfo} from '@/api/ceping/cepinghdglb'
import {wdXuanPiaoXp,wdXuanPiaoXpAll} from "@/api/ceping/cepinghdglxpxxb";
import cePing from '@/page/ceping/leaders/cpIndex';
import cpnmLogin from './cpnmlogin'
import cePingIndex from '@/page/ceping/leaders/cpIndex-index';
import {getStore, setStore} from '@/util/store'
import {encode, decode} from "@/util/Base64";

export default {
  name: 'Login',
  components: {
    cpnmLogin,
    topColor,
    cePing,
    cePingIndex
  },
  data() {
    return {
      tenantList: [],
      active: '',
      socialForm: {},
      url: "img/loginbg.png",
      mode: "login",
      loginForm: {
        username: ""
      },
      checked: false,
      loginRules: {
        username: [
          {required: true, message: "请输入登录码", trigger: "blur"},
        ]
      }
    }
  },
  watch: {
    $route: {
      handler() {
        const params = this.$route.query
        if (this.validatenull(params.state) && this.validatenull(params.code)) return

        this.socialForm.state = params.state
        this.socialForm.code = params.code

        const loading = this.$loading({
          lock: true,
          text: `登录中,请稍后。。。`,
          spinner: 'el-icon-loading'
        })
        this.$store.dispatch('LoginBySocial', this.socialForm).then(
          () => {
            loading.close()
            this.$router.push({path: this.tagWel.value})
          }).catch(() => {
          loading.close()
        })
      },
      immediate: true
    }
  },
  created() {
    this.watermark()
    this.init();
  },
  mounted() {
  },
  computed: {
    ...mapGetters(['website'])
  },
  methods: {
    init() {
      let params = this.$route.query
      this.mode = "login";
      setStore({ name: 'tenantId', content: 4 })
    },
    handleCommand(command) {
      setStore({name: 'tenantId', content: command})
    },
    watermark() {
      const text = ''
      const canvas = document.createElement('canvas')
      canvas.width = '500'
      canvas.height = '200'
      const ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, 200, 200) // 绘制之前画布清除
      ctx.font = '30px 黑体'
      ctx.rotate(-20 * Math.PI / 180) // 为了实现水印倾斜效果,旋转画布坐标系
      ctx.fillStyle = 'rgba(100,100,100,0.15)' // 画笔颜色
      ctx.fillText(text, -20, 200) // 书写的内容及位置
      ctx.rotate('20*Math.PI/180') // 坐标系还原,如果后续没有其他操作,这一步可以省略
      // 将canvas的内容转换为base64编码
      const data = canvas.toDataURL('image/png', 1) // 1表示质量(无损压缩)

      window.onload = () => {
        const background = 'url(' + data + ') repeat'
        var watermark = document.createElement('div')
        watermark.style.width = '100%'
        watermark.style.height = '100%'
        watermark.style.position = 'fixed'
        watermark.style.left = '0'
        watermark.style.top = '0'
        watermark.style.pointerEvents = 'none'
        watermark.style.background = background
        watermark.style.zIndex = '9999'
        document.body.append(watermark)
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          let xpCode = this.loginForm.username + "";
          wdXuanPiaoXpAll(xpCode).then(res => {
            if (res.data.data.length > 0) {
              // this.$refs.cePing.initXp(xpCode);
              this.$refs.cePingIndex.initXp(res.data.data,xpCode);
              this.loginForm.username = "";
            } else {
              this.$notify.closeAll();
              this.$notify.error('该票号不在本次测评中');
            }
          });
        }
      });
      // this.$refs.loginForm.validate((valid) => {
      //   if (valid) {
      //     let xpCode = this.loginForm.username + "";
      //     wdXuanPiaoXp(xpCode).then(res => {
      //       if (res.data.data.length > 0) {
      //         this.$refs.cePing.initXp(xpCode);
      //         this.loginForm.username = "";
      //       } else {
      //         this.$notify.closeAll();
      //         this.$notify.error('票号中没有选票信息');
      //       }
      //     });
      //   }
      // });
    },
    reloadHd() {

    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/login.scss";

.loginpic.niMingLogin {
  .loginmain {
    // max-width: 1200px;
    // min-width: 780px;
    // width: auto;
    position: absolute;
    // left: 50%;
    // margin: 0;
    // transform: translateX(-50%);
    .title {
      font-size: 32px;
    }
  }

  .nMcopyright {
    width: 100% !important;
  }
}
</style>
